<template>
  <uni-popup ref="popup" type="center" :mask-click="false" :safe-area="false" mask-background-color="rgba(0,0,0,0.7)">
    <view class="privacy_modal_content">
      <view class="modal_title">
        完美繁花隐私保护
      </view>
      <view class="modal_content">
        感谢您使用完美繁花！
        <br />
        我们非常重视您的个人信息和隐私保护，为了向您提供更好的相亲服务，在使用我们的产品前，请您仔细阅读并理解
        <text class="link-text" @click="viewPricacyPolicy(3)">《完美繁花隐私保护指引》</text>和
        <text class="link-text" @click="viewPricacyPolicy(1)">《完美繁花用户协议》</text>的所有条款。如您同意上述协议条款，
        请点击“同意”开始使用【完美繁花】，点击“拒绝”则退出程序。
      </view>
      <view class="modal_footer">
        <custom-btn class="refuse-btn" @click="refuseFn">拒绝</custom-btn>
        <view>
          <button open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="confirmFn">
            <custom-btn class="confirm-btn">同意</custom-btn>
          </button>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import useStore from "@/store";
const { common } = useStore();
const popup = ref();
watch(
  () => common.privacyOpen,
  (v) => {
    if (v) init();
    uni.hideTabBar();
  }
);
const init = (title) => {
  popup.value.open();
};

const refuseFn = () => {
  uni.exitMiniProgram({
    success: function () {
      popup.value.close();
      uni.showTabBar();
    },
    fail: function (err) {
      console.log("退出小程序失败", err);
    },
  });
};

const confirmFn = () => {
  uni.showTabBar();
  popup.value.close();
};

const viewPricacyPolicy = (t) => {
  uni.navigateTo({ url: "/subPages/settings/privacy?type=" + t });
};

defineExpose({ init });
</script>

<style lang="scss" scoped>
@import "@/styles/global.scss";
.privacy_modal_content {
  padding: 40rpx;
  background: #fff;
  border-radius: 30rpx;
  margin: 50rpx;
  .modal_title {
    padding-bottom: 20rpx;
    font-size: 44rpx;
    font-weight: bold;
    text-align: center;
    line-height: 120rpx;
    color: #000;
  }
  .modal_content {
    flex: 1;
    line-height: 60rpx;
    color: #333;
    overflow-y: auto;
    font-size: 30rpx;
    .link-text {
      color: #2e82ca;
    }
  }
  .modal_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 40rpx;
    color: #fff;
    padding-top: 20rpx;
    .refuse-btn {
      flex: 0 0 190rpx;
      width: 190rpx;
      height: 120rpx;
      line-height: 120rpx;
      border-radius: 120rpx;
      color: #ccc;
      border: 1rpx solid #ddd;
    }
    .confirm-btn {
      color: #fff;
      width: 340rpx;
      height: 120rpx;
      line-height: 120rpx;
      border-radius: 120rpx;
      background: linear-gradient(180deg, rgba(241, 55, 64, 0.9) 0%, #f13740 100%);
    }
  }
}
</style>
